<%--
  Created by IntelliJ IDEA.
  User: wanqiuying
  Date: 2020/6/13
  Time: 10:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>

<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="">
    <title>众筹中原-提供您身边的万元股权投资项目</title>
    <link rel="stylesheet" href="../css/public.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/style.css" />
    <link rel="stylesheet" href="../js/layui/css/layui.css" />
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/hammer.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .list_head {
            float: left;
        }

        .fm_upload {
            float: left;
            margin-right: 10px;
        }

        .upload_btn_2 {
            width: 140px;
            height: 32px;
            border-radius: 4px;
            /*background-color: #ff8a00;*/
            color: #FFFFFF;
            font-size: 14px;
            text-align: center;
            line-height: 32px;
            outline: none;
            margin-left: 37px;
            position: relative;
            margin-top: 10px;
        }

        .cover-wrap,
        .cover-wrap1 {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 10000000;
            text-align: center;
        }

        .tc_upload {
            width: 900px;
            height: 600px;
            margin: 100px auto;
            background-color: #FFFFFF;
            overflow: hidden;
            border-radius: 4px;
        }
        #clipBtn,#clipBtn1{
            width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;
        }
        .cancleBtn{
            width:120px;height: 36px;border-radius: 4px;background-color:#2cc8a3;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;
        }
        #file,#file1{
            cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;
        }
        #sub{
            /*display: inline-block;*/
            width: 48%;
            padding: 8px 0;
            font-size: 16px;
            color: #FFF;
            border: none;
            border-radius: 5px;
            background: #0ba492;
            text-align: center;
        }
        input[type=file] {}
    </style>
</head>

<body>
<!-- 头部 -->
<header>
    <div class="center clearfix">
        <div class="rt_head">
					<span>
						<img src="../images/head_call.png" alt=""> 官方咨询电话：
						<b>400-999-8235</b>
					</span>
            <span>
						<img src="../images/head_scan.png" />微信公众号
					</span>
            <span>
						<a href="###">
							关于我们
						</a>
					</span>
        </div>
    </div>
</header>
<!-- 导航nav -->
<nav>
    <div class="center" style="position: relative;">
        <a href="###" class="logo"></a>
        <div class="nav_tab">
            <a href="###">首页</a>
            <a href="###">展示类项目</a>
            <a href="###">交易类项目</a>
            <a href="###">已成功项目</a>
            <a href="###">众筹社区</a>
        </div>
        <a href="###" class="gradient add_zc">
            +发起众筹
        </a>
        <div class="log_txt">
            <!-- 登录前 -->
            <div class="log_txt_before" id="loginBefore">
                <a href="/pages/login">登录</a>|
                <a href="/pages/register">注册</a>
            </div>
            <!--登录后-->
            <div class="log_txt_head" id="loginAfter">
                <a href="launch/launchCenter.do" class="mes" style="margin-right: -10px;">
                    <i class="iconfont icon-xinfeng"></i>
                </a>
                <a class="head-img" id="head-img">
                    <img id="c_header" src="viewer/viewDisk.do?path="
                         onerror="javascript:this.src='images/head-mr.jpg'" />
                </a>
                <ul style="display: none;" id="list">
                    <li class="active">
                        <a href="Site/toPerson.do">
                            <i class="iconfont icon-gerenzhongxin"></i>个人设置
                        </a>
                    </li>
                    <li>
                        <a href="order/findMaybeOrder.do">
                            <i class="iconfont icon-dingdanxinxi"></i>订单管理
                        </a>
                    </li>
                    <li>
                        <a href="persion/project.do">
                            <i class="iconfont icon-xiangmuxiaoxi"></i>项目管理
                        </a>
                    </li>
                    <li>
                        <a href="money/findFortune.do">
                            <i class="iconfont icon-caifuzhongxin"></i>财富中心
                        </a>
                    </li>
                    <li>
                        <a href="launch/launchCenter.do">
                            <i class="iconfont icon-xinfeng"></i>消息中心
                        </a>
                    </li>
                    <li style="border-top:1px solid #EDEDED;text-align: center;">
                        <a href="/login/logout"> 退出 </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<!-- 轮播 -->
<div class="nuk"></div>
<div class="up"></div>
<!-- 详情 -->
<div class="tj" style="background:#F6F6F6;">
    <div class="w" style="background:#fff;overflow: hidden;">
        <div class="smrzTop" style="margin-bottom: 40px;">
            <p style="color: #0BA192;padding: 35px 100px;"><i class="iconfont icon-fabubiaoshu"></i>发布项目</p>
        </div>
        <div class="project_status">
            <ul>
                <li class="active bef">
                    <span>1</span> 填写项目信息
                </li>
                <li>
                    <span>2</span> 填写众筹信息
                </li>
                <li>
                    <span>3</span> 支付展示费用
                </li>
                <li class=" bef rig">
                    <span>4</span> 项目发布成功
                </li>
            </ul>
        </div>
        <form action="/item/publishItem1" id="form" method="post" onsubmit=" return tijiao()">
        <div class="tst_box">
            <span class="list_head">项目标题：</span>
            <input type="text" name="title" placeholder="不超过30个字"/>
        </div>
        <div class="tst_box">
            <span class="list_head">众筹天数：</span>
            <input type="text" readonly="value" id="zcDays" name="zcDays" placeholder="提示50元/天,自动计算"/> 天
        </div>
        <div class="tst_box">
            <span class="list_head">开始时间：</span>
            <input type="text" id="beginTime" name="beginTime" placeholder="请选择开始日期">
        </div>
        <div class="tst_box">
            <span class="list_head">结束时间：</span>
            <input type="text" id="endTime" name="endTime" placeholder="请先选择结束日期"/>
        </div>
        <div class="tst_box">
            <span class="list_head">项目位置：</span>
            <input type="text" name="location" required="required"/>
        </div>
        <div class="tst_box">
            <span class="list_head">项目类型：</span>
            <select style="width: 200px;" name="type">
                <option value="1">综合权益类</option>
                <option value="2">股权交易类</option>
            </select>
        </div>
        <div style="clear: both;"></div>
        <div>
            <div class="tst_box">
                <span class="list_head">项目封面：</span>
                <!--上传图片-->
                <div class="fm_upload">
                    <div class="cover-wrap">
                        <div class="tc_upload">
                            <div id="clipArea" style="margin:10px;height: 520px;"></div>
                            <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                <input id="clipBtn" class="btn" value="保存封面"/>
                                <input class="cancleBtn" value="取消保存"/>
                            </div>
                        </div>
                    </div>
                    <div id="view" style="width:200px;height:120px;" title="请上传 500*300 的封面图片"></div>
                    <div class="upload_btn_2 gradient">
                        上传列表页头图
                        <input type="file" id="file">
                        <input type="hidden" id="listImg" name="listImg" >
                    </div>
                </div>
                <!---->
                <div class="fm_upload">
                    <div class="cover-wrap1">
                        <div class="tc_upload">
                            <div id="clipArea1" style="margin:10px;height: 520px;"></div>
                            <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                <input id="clipBtn1" value="保存封面"/>
                                <input class="cancleBtn" value="取消保存"/>
                            </div>
                        </div>
                    </div>
                    <div id="view1" style="width:200px;height:120px;" title="请上传 300*376 的封面图片"></div>
                    <div class="upload_btn_2 gradient">
                        上传详情页头图
                        <input type="file" id="file1">
                        <input type="hidden" id="detailImg" name="detailImg" >
                    </div>
                </div>

                <div style="clear: both;"></div>
                <p style="color:#ea6b6b;margin:10px 0 15px 180px">
                    *列表页头图 剪切大小为500*300，详情页头图剪切大小为300*376
                    支持jpg/png/gif格式，大小不超过10.0MB。</p>
            </div>
            <div class="tst_box">
                <span class="list_head">项目简介：</span>
                <textarea style="width: 410px;height:120px;" name="brief" placeholder="请对您的项目做一下简单介绍（50字以内）"></textarea>
            </div>
        </div>

        <div class="tst_box" style="width: 100%;">
            <span class="list_head">项目详情：</span>
            <div style="width:1000px;height:350px;display: inline-block;background: #e1e1e1;">
                <!--此处放编辑器-->
                <textarea style="width: 1000px;height:350px;" name="description"></textarea>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="buttonBox" style="width: 450px;padding-bottom: 50px;margin-left:180px ;margin-top: 25px;">
            <input id="sub" type="button" value="下一步" onclick="tijiao()">
        </div>
        </form>
    </div>
</div>
<div class="nuk"></div>
<!-- footer -->
<footer>
    <div class="w clearfix">
        <div class="lg_footer clearfix">
            <div class="sm_footer">
                <div class="gplz">
                    <div class="gplz_lj">
                        <ul class="" style="">
                            <li>
                                <a href="http://www.zczyw.com/help/index/id/1">关于我们</a>
                            </li>
                            <li> |</li>
                            <li>
                                <a href="http://www.zczyw.com/help/index/id/2">联系我们</a>
                            </li>
                            <li> |</li>
                            <li>
                                <a href="http://www.zczyw.com/help/index/id/7">众筹课堂</a>
                            </li>
                            <li> |</li>
                            <li>
                                <a href="http://www.zczyw.com/help/index/id/3">注册协议</a>
                            </li>
                            <li> |</li>
                            <li>
                                <a href="http://www.zczyw.com/help/index/id/4">发起人协议</a>
                            </li>
                            <li> |</li>
                            <li>
                                <a href="http://www.zczyw.com/help/index/id/5">发起人须知</a>
                            </li>
                            <li> |</li>
                            <li>
                                <a href="http://www.zczyw.com/help/index/id/6">支持者须知</a>
                            </li>
                        </ul>
                        <p class="place_footer">--众筹中原-- by:神农山一队精英 </p>

                    </div>
                </div>
                <div class="trusted-icon">
                    <a href="http://www.51miit.com/auth/CE5B140C67E74642BB83A59AE27312EE/" target="_blank">
                        <img src="../images/icp.png" alt="">
                    </a>
                    <a href="http://www.zczyw.com/Public/statics/img/shangbiaozheng.jpg" target="_blank">
                        <img src="../images/shangbiaozheng.png" alt="">
                    </a>
                    <a href="http://www.zczyw.com/Public/statics/img/zhuzuoquan.jpg" target="_blank">
                        <img src="../images/zhuzuoquan.png" alt="">
                    </a>
                    <a href="http://gsxt.haaic.gov.cn/company/detail.jspx?id=4F8FFD5FE3C8896FE053070A080AC15D&amp;jyzk=jyzc" target="_blank">
                        <img src="../images/gongshang.png" alt="河南工商">
                    </a>
                    <a href="http://webscan.360.cn/index/checkwebsite/url/www.zczyw.com" target="_blank">
                        <!--<img border="0" src="http://webscan.360.cn/status/pai/hash/61b2506c91c6f99c2d853ff592ab0a1f"/>-->
                        <img border="0" src="../images/360.png">
                    </a>
                    <a href="https://www.creditchina.gov.cn/xinyongxinxixiangqing/default.html?isEncryStr=1&amp;encryStr=fWJ3bjludDZpMjE%3D%0A&amp;name=%E6%B2%B3%E5%8D%97%E5%8D%8E%E6%99%9F%E7%BD%91%E7%BB%9C%E7%A7%91%E6%8A%80%E8%82%A1%E4%BB%BD%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&amp;isEncryStr=1" target="_blank">
                        <img src="../images/china.png" alt="信用中国">
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- 侧边栏 -->
<div class="side">

</div>

<script src="../js/layui/layui.all.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<!-- 控制登录菜单 -->
<script type="text/javascript">
    var loginUser=${loginObject.userId};
    if (loginUser!=null){
        console.log(loginUser);
        $("#loginBefore").css("display","none");
        $("#loginAfter").css("display","block");
    }else {
        console.log(loginUser);
        $("#loginAfter").css("display","none");
    }

    $('#head-img').hover(function() {
        $('#list').show();
    });
    $('.log_txt_head').mouseleave(function() {
        $("#list").css("display", "none");
    });
    $('#head-img').on('click', function() {
        window.location.href = "Site/toPerson.do";
    });
</script>
<script type="text/javascript">
    //上传列表页封面
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [500, 300], // 截取框的宽和高组成的数组。默认值为[260,260]
        outputSize: [500, 300], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
        //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
        file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
        view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
        ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
        loadStart: function() {
            // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
            $('.cover-wrap').fadeIn();
            console.log("照片读取中");
        },
        loadComplete: function() {
            // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
            console.log("照片读取完成");
        },
        //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
        clipFinish: function(dataURL) {
            // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            $('.cover-wrap').fadeOut();
            $('#view').css('background-size', '100% 100%');
            // console.log(dataURL);

            $.ajax({
                url:'/item/upLoadImg',
                type:'post',
                data:{
                    dataURL1:dataURL
                },
                success:function (result) {
                    console.log(result.msg),
                    console.log(result.url),
                    $("#listImg").attr("value",result.url)
                }
            });
        }
    });
    //clipArea.destroy();
</script>
<script type="text/javascript">
    //上传详情页封面
    //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    var clipArea = new bjj.PhotoClip("#clipArea1", {
        size: [300, 376], // 截取框的宽和高组成的数组。默认值为[260,260]
        outputSize: [300, 376], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
        //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
        file: "#file1", // 上传图片的<input type="file">控件的选择器或者DOM对象
        view: "#view1", // 显示截取后图像的容器的选择器或者DOM对象
        ok: "#clipBtn1", // 确认截图按钮的选择器或者DOM对象
        loadStart: function() {
            // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
            $('.cover-wrap1').fadeIn();
            console.log("照片读取中");
        },
        loadComplete: function() {
            // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
            console.log("照片读取完成");
        },
        //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
        clipFinish: function(dataURL) {
            // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            $('.cover-wrap1').fadeOut();
            $('#view1').css('background-size', '100% 100%');
            // console.log(dataURL);
            $.ajax({
                url:'/item/upLoadImg',
                type:'post',
                data:{
                    dataURL1:dataURL
                },
                success:function (result) {
                    console.log(result.msg),
                    console.log(result.url),
                    $("#detailImg").attr("value",result.url)
                }
            });
        }
    });
    //clipArea.destroy();
</script>
<script type="text/javascript">
    //取消截图的方法
    $(document).ready(function () {
        $(".cancleBtn").click(function () {
            console.log("关闭截取界面")
            $('.cover-wrap').css('display', 'none');
            $('.cover-wrap1').css('display', 'none');
        })
    })
</script>
<script type="text/javascript">
    function submit(callback){
        document.getElementById("form").submit();
        callback();
    }
    function reset(){
        $('#form').reset();
    }
    function tijiao(){
        var flag = verify(form)
        if(flag==2){
            submit(reset)
        }
    }

    function verify(form) {
        if(form.title.value===''){
            layer.msg('项目标题不能为空');
            form.title.focus();
            return 1;
        }
        if(form.title.value.length>30){
            layer.msg('项目标题不能超过30个字！');
            form.title.focus();
            return 1;
        }
        if(form.zcDays.value===''){
            layer.msg('众筹天数不能为空！');
            form.zc_days.focus();
            return 1;
        }
        if(form.zcDays.value<=0){
            layer.msg('众筹天数要大于零！');
            form.zcDays.focus();
            return 1;
        }
        if(form.beginTime.value===''){
            layer.msg('开始时间不能为空！');
            form.beginTime.focus();
            return 1;
        }
        if(form.endTime.value===''){
            layer.msg('结束时间不能为空！');
            form.endTime.focus();
            return 1;
        }
        if(form.location.value===''){
            layer.msg('项目位置不能为空！');
            form.location.focus();
            return 1;
        }
        if(form.brief.value===''){
            layer.msg('项目简介不能为空！');
            form.brief.focus();
            return 1;
        }
        if(form.description.value===''){
            layer.msg('项目详情不能为空！');
            form.description.focus();
            return 1;
        }
        return 2;
    }
</script>
<%--<script>
    //执行一个laydate实例
    laydate.render({
        elem: '#beginTime' //指定元素

    });
    laydate.render({
        elem: '#endTime' //指定元素
    });
</script>--%>
<script type="text/javascript">
    laydate.render({
        elem: '#beginTime',
        min:0,
        format: 'yyyy-MM-dd',
        done: function (value) {
            console.log(value);
            //结束时间
            laydate.render({
                elem: '#endTime',
                format: 'yyyy-MM-dd',
                min:value,
                done: function (value1){
                    //计算相差时间
                    console.log(value+value1);
                    var beginTime=new Date(value);
                    var endTime= new Date(value1);
                    var date=(endTime-beginTime)/1000/60/60/24+1;
                    console.log(date);
                    $("#zcDays").val(date);
                }
            })
        }
    })


</script>

</body>

</html>